<template>
  <div class="header-with-back">
    <div class="back-nav" @click="goToIndex">
      <van-icon name="arrow-left" />
      <span style="font-size: 1.2rem">密码修改</span>
    </div>
  </div>
  <div class="user-info-container">
    <div class="fw"/>
    <van-cell-group inset style="margin-bottom: 20px">
      <van-field
          v-model="resetPassword.verificationCode"
          center
          clearable
          label="验&nbsp;&nbsp;证&nbsp;&nbsp;码"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请输入邮箱' }]"
          size="large"
      >
        <template #button>
          <van-button
              size="small"
              type="primary"
              @click="sendVerificationCode"
          >
            {{ resetPassword.countdown > 0 ? `${resetPassword.countdown}秒` : '获取验证码' }}
          </van-button>
        </template>
      </van-field>
      <van-field
          v-model="resetPassword.newpassword"
          type="password"
          name="新密码"
          label="新&nbsp;&nbsp;密&nbsp;&nbsp;码"
          placeholder="请填写新密码"
          label-align="left"
          :rules="[{ required: true, message: '请填写新密码' }]"
          size="large"
      />
      <van-field
          v-model="resetPassword.confirmPassword"
          type="password"
          name="确认密码"
          label="确认密码"
          placeholder="请再次填写密码"
          label-align="left"
          :rules="[{ required: true, message: '请再次填写密码' }]"
          size="large"
      />
    </van-cell-group>

    <div class="button-container">
      <van-button
          :loading="resetPassword.loading"
          :disabled="resetPasswordButtom"
          type="primary"
          @click="handleReset"
      >重置密码</van-button>
    </div>
  </div>
</template>

<script setup lang="ts" name="UserInfoSetting">
import { ref, reactive, computed } from 'vue';
import router from "../../../Router";
import { useUserStore } from '../../../Store/modules/userinfo/UserInfo.js'
import {showDialog, showToast} from "vant";
import {resetPasswordUsingPost, sendResetCodeUsingPost} from "../../../Api/yonghumokuai";


const userStore = useUserStore();
// 返回到个人中心
function goToIndex() {
  router.push('/UserInfoSetting');
}

// 重置密码
const resetPassword = reactive({
  newpassword: "",
  confirmPassword: "",
  email: userStore.userInfo.email,
  verificationCode: '',
  countdown: 0,
  loading: false,
})

// 发送验证码
async function sendVerificationCode() {
  try {
    const response = await sendResetCodeUsingPost({
      email: resetPassword.email
    })
    const data = response.data
    if (data.code === 0) {
      showToast('验证码已发送');
      resetPassword.countdown = 60;
      const timer = setInterval(() => {
        resetPassword.countdown--;
        if (resetPassword.countdown <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    } else {
      showToast(data.message || '验证码发送失败');
    }
  } catch (error: any) {
    showToast(error.response?.data?.message || '验证码发送失败');
  }
}

// 按钮禁用状态
const resetPasswordButtom = computed(() => {
  return !resetPassword.verificationCode ||
      !resetPassword.newpassword ||
      !resetPassword.confirmPassword
});

// 重置密码处理
async function handleReset() {
  if (resetPassword.newpassword !== resetPassword.confirmPassword) {
    showToast('两次输入的密码不一致');
    return;
  }

  if (resetPassword.newpassword.length < 8) {
    showToast('密码长度不能小于8位');
    return;
  }

  resetPassword.loading = true;
  try {
    const response = await resetPasswordUsingPost({
      code: resetPassword.verificationCode,
      email: resetPassword.email,
      password: resetPassword.newpassword
    })
    const data = response.data
    if (data.code === 0) {
      showToast('密码重置成功,请重新登录');
      userStore.clearUser()
      router.push('/')
    } else {
      showToast(data.message || '密码重置失败');
    }
  } catch (error: any) {
    showDialog({
      message: error.response?.data?.message || '密码重置失败，请重试',
    });
  } finally {
    resetPassword.loading = false;
  }
}

</script>

<style scoped>
/*返回*/
.back-nav {
  position: fixed;
  left: 1%;
  top: 1.25%;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: rgb(83, 30, 88);
  padding: 0.5rem;
  z-index: 10;
  font-size: 0.9rem;
}
/*返回符号*/
.header-with-back .van-icon {
  position: static;
  font-size: 1.35rem;
}

/* 基础布局设置 */
.user-info-container {
  padding: 20px;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: #f9f5f7;
}

.fw {
  height: 7%;
}

.function-item span {
  color: #333;
  font-weight: 500;
}

/*按钮*/
.button-container {
  margin: 10px auto;
  width: 90%;
}

/* 主按钮样式 */
:deep(.van-button--primary) {
  width: 100%;
  background-color: #800080;
  border: none;
}

/* 主按钮非禁用状态下的样式 */
:deep(.van-button--primary:not(:disabled)) {
  background-color: #800080;
}

/* 主按钮非禁用状态下的悬停效果 */
:deep(.van-button--primary:not(:disabled):hover) {
  background-color: #9a009a;
}
</style>
